<template>
  <div class="main_top">
    <div style="padding-top: 5%">

      <router-link :to="{path:'user/login'}" v-if="housesCover == null "  style="flex-direction:column;display: flex;  justify-content: center;
    align-items: center;">
        <img :src="housesCover"
             style="width: 62px ;height: 62px "/>
        <label style="padding:3% ;color: white">上传照片</label>
      </router-link>
      <mt-field label="房东姓名" placeholder="请输入房东姓名" v-model="landlordName"></mt-field>
      <mt-field label="联系方式" placeholder="请输入联系方式(限11位)"  type="tel" v-model="landlordContact"></mt-field>
      <mt-field label="楼房名称" placeholder="请输入楼房名称" v-model="floorName"></mt-field>
      <mt-field label="房屋房间数量" placeholder="请输入房屋房间数量" v-model="bedroomCount"></mt-field>
      <mt-field label="房屋卫生间数量" placeholder="请输入房屋卫生间数量" v-model="bathroomCount"></mt-field>
      <mt-field label="房屋客厅数量" placeholder="请输入房屋客厅数量" v-model="livingroomCount"></mt-field>
      <mt-field label="出租价格" placeholder="请输入出租价格(元/月)" v-model="rentalPrices"></mt-field>
      <mt-field label="房屋面积" type="number" placeholder="请输入房屋面积 (m²)" v-model="housesSpace"></mt-field>

    <!--  <mt-field label="装修类型"  placeholder="请输入装修类型" v-model="decorateType"></mt-field>-->

      <mt-field label="装修类型" placeholder="请选择" v-model="decorateType" @click.native = "showDecorateType"></mt-field>
      <mt-popup
        v-model="decorateTypeVisible"
        position="bottom" style="width: 100%">
        <!-- <div style="float: left"> 确定</div>  <div style="float: right"> 取消  </div>-->
        <mt-picker :slots="decorateTypeArray" @change="decorateTypeChange" valueKey="name"></mt-picker>

      </mt-popup>

    </div>
    <div>
    <mt-button type="primary" size="large"
               @click.native="handleClick"  style="text-align: center">提交</mt-button>
    </div>
    <a-input type="hidden" v-model="decorate"></a-input>
    </div>
</template>

<script>
  import * as mint from 'mint-ui';
  import { postAction } from '@/api/manage';
  import { MessageBox } from 'mint-ui'

  export default {
    name: 'landlordLeague',
    components: {
      ...mint

    },
    data() {
      return{
        decorateTypeVisible:false,
        decorateTypeArray: [{
          values: [{name: '毛坯房', value: '1'}, {name: '简装房', value: '2'},{name: '中装房', value: '3'},{name: '精装房', value: '4'}],
          className: 'slot1',
          textAlign: 'center'
        }],
      }
    },

    methods:{
      decorateTypeChange(picker, values) {
        this.decorate = values[0].value;
        this.decorateType = values[0].name;
      },
      showDecorateType(){
        this.decorateTypeVisible = !this.decorateTypeVisible;
      },
      handleClick:function() {
        const parameter = {
          landlordName: this.landlordName,
          floorName: this.floorName,
          bedroomCount: this.bedroomCount,
          bathroomCount: this.bathroomCount,
          livingroomCount: this.livingroomCount,
          rentalPrices: this.rentalPrices,
          housesSpace: this.housesSpace,
          housesCover: this.housesCover,
          landlordContact: this.landlordContact,
          decorateType:this.decorateType
        }

        // this.$confirm('确认提交吗？', '提示', {}).then(() => {
            postAction("/landlord/landlord/add",parameter).then((res) => {
              if(res.success){
                MessageBox('提示', res.message);
                this.$router.push('/phone/mine')
              }else {
                MessageBox('提示', '操作失败!!!');
              }

            })
        // });
      }
    },mounted(){
      this.decorate ='';
      this.decorateType = '';
    }
  }
</script>
.ant-list-item-content {
display: block;
}
<style scoped>
  >>>.mint-field-core {
    border-left:1px solid #999;
    padding-left: 16px;
  }
  >>>.mint-field-core::-webkit-input-placeholder {
    color:#aaa;
  }
</style>